﻿import React,{Component} from 'react';
import Adaptive from '../../../component/adaptive/Adaptive';
import Header from '../../../system/header/Header';
import {ReactHeight} from 'react-height';
import {asyncSize} from 'pofod/window.size';
import Footer from '../../../component/footer/Footer';
import MobileFooter from '../../../component/footer-mobile/FooterMobile';
import './medical.less';
class Medical extends Component{
    state={
        height:asyncSize().pageHeight,
        headerHeight:''
    };
    componentDidMount(){
        window.addEventListener('resize',()=>{
            this.setState({
                height:asyncSize().pageHeight
            })
        });
    };
    componentWillUnmount(){
        window.removeEventListener('resize',()=>{
            this.setState({
                height:asyncSize().pageHeight
            })
        });
    };
    getHeight = (height) =>{
        this.setState({
            headerHeight:height
        });
    };
    render()
    {
        let prefix = 'medical';
        let {height,headerHeight} = this.state;
        console.log(height);
        return (
            <div className={prefix+'-container'} style={{height:height,minHeight:'568px'}}>
                <ReactHeight onHeightReady={this.getHeight}>
                    <Header refName="about" childNodes="about-a" choseImgDisplay="none"/>
                </ReactHeight>
                <div className={prefix+' clearfix'} style={{minHeight:'431px',height:height-headerHeight}}>
                    <div className={prefix+'-content-box clearfix'}>
                        <div id={prefix+"-content"}>
                            <h1>梅奥医疗集团</h1>
                            <p>Mayo Clinic是美国最大的非营利性综合医疗集团之一，已有超过150年的历史，是最具影响力和代表世界最高医疗水平的医疗机构。</p>
                        </div>
                    </div>
                </div>
                <div className={prefix+'-rank'}>
                    <h1>2017-2018年美国最佳医院排行第一</h1>
                    <p>2017年8月, 《美国新闻与世界报道》公布了2017-2018年度全美医院排名，梅奥医疗集团（Mayo Clinic）罗切斯特院区以总分415分名列榜首，遥遥领先于其它知名医疗机构。同时，在所有排名的16个临床科室中，梅奥有6个科室排名第一，4个科室排名第二，1个科室排名第三，另外还有4个科室排名前十，名列前茅的科室多于美国任何其它医疗机构。</p>
                    <img src={require('./img/rank.png')}/>
                </div>
                <div className={prefix+'-structure'}>
                    <div className={prefix+"-structure-box"}>
                        <h1>最值得信赖的医疗服务机构</h1>
                        <p> 作为最值得信赖的医疗服务机构，Mayo Clinic每年为来自全球的140多个国家超过130万病人提供最好的医疗服务，美国前总统里根、福特、布什夫妇、潘石屹等政商界名人均专程前往治病，是全球公认的医疗终极目的地。美国前总统奥巴马称“梅奥是美国最高质量及最有效率但是低成本的医疗机构的杰出代表，应该是美国医改效仿的榜样”。</p>
                        <img src={require('./img/compare.jpg')}/>
                        <img src={require('./img/cost.jpg')}/>
                    </div>
                </div>
                <Adaptive desktop={<Footer/>} phone={<MobileFooter/>} size={1200}/>
            </div>
        )
    }
};
export default Medical;